<template>
  <el-dialog title="用户列表"  append-to-body :close-on-click-modal="false" :visible.sync="visible" @close="btnCancel()" width="90vw" top="5vh">
    <el-container>
      <el-main style="height:70vh;overflow-x: hidden;">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="5">
            <div class="boxsty">
              <el-tree :data="treeData" ref="deptTree" :props="defaultProps" :filter-node-method="filterNode"
                class="filter-tree" node-key="id" highlight-current :default-expanded-keys="[1]" accordion
                @node-click="getNodeData" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="7">
            <div class="boxsty">
              <div class="flex titbottom">
                <el-input v-model="listQuery.name" placeholder="请输入搜索用户" style="margin-right:10px" :maxlength="50"></el-input>
                <el-button @click="btnSearch" type="primary" icon="el-icon-search" plain>搜索</el-button>
              </div>
              <el-table @row-click="handleClick" :data="tableDataDept" v-loading="tableloading" style="width: 100%">
                <el-table-column prop="username" label="用户" width="180">
                </el-table-column>
                <el-table-column prop="ryName" label="姓名" min-width="200">
                </el-table-column>
              </el-table>
              <div style="margin-top:20px">
                <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                  :current-page="page.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize"
                  :total="page.total" background layout="total, sizes, prev, pager, next">
                </el-pagination>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <div class="boxsty">
              <div class="tabletext titbottom">已选择人员</div>
              <el-table :data="userList" ref="ry-table" stripe>
                <el-table-column prop="ryName" label="姓名" width="200">
                </el-table-column>
                <el-table-column prop="deptName" label="部门" min-width="220">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button @click="delUserList(scope.$index)" type="danger" plain>删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="canSubmit" @click="btnSave">确定</el-button>
      <el-button @click="btnCancel">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    fetchTree
  } from '@/api/admin/dept'
  import {
    fetchList,
    getIds
  } from '@/api/admin/user'
  export default {
    props: {
      //选择的用户
      userIds: {
        type: Array,
        default: () => []
      },
      //是否多选
      multiple: {
        type: Boolean,
        default: true
      },
      //是否角色显示
      roleCode:{
        type: String,
        default: ''
      }
    },

    data() {
      return {
        qjDeptId: '', //全局部门id,左侧树点击设置
        userList: [],
        tableloading: false, //table遮挡
        visible: false,
        canSubmit: false,
        tableDataDept: [],
        listQuery: {
          name: ''
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20, // 每页显示多少条,
          isAsc: false // 是否倒序
        },
        searchForm: {},
        zdySearchForm: {},
      }
    },
    created() {
      this.getList();
    },
    methods: {
      init() {
        this.visible = true;
        this.canSubmit = true;
        if (this.userIds.length>0 && this.userIds[0] !== "") {
          this.$nextTick(() => {
            this.loadUser(this.userIds);
          });
        }
      },
      loadUser(ids) {
        getIds(ids).then(res => {
          var arr = res.data.data;
          for (var i = 0; i < arr.length; i++) {
            var node = this.$refs.deptTree.getNode(arr[i].deptId);
            this.$set(arr[i], 'deptName', node.data.name);
          }
          this.userList = arr

        });
      },
      getList() {
        fetchTree().then(response => {
          this.treeData = response.data.data
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      getPersons(page, params) {
        //}, params, this.searchForm, this.zdySearchForm)).then(response => {
        this.tableloading = true;
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params)).then(response => {
          this.tableDataDept = response.data.data.records
          this.page.total = response.data.data.total
          this.tableloading = false;
        }).catch(err => {
          this.tableloading = false;
        })
      },

      getNodeData(data) {
        this.page.currentPage = 1
        this.qjDeptId = "";
        this.qjDeptId = data.id;
        this.getPageUsers();
      },
      //选人添加到右边的框
      handleClick(vm) {
        for (var i = 0; i < this.userList.length; i++) {
          if (this.userList[i].userId == vm.userId) {
            return;
          }
        }
        if (this.multiple) {
          this.userList.push(vm);
        } else {
          this.userList.splice(0, 1, vm);
        }

      },
      //删除人员list
      delUserList(index) {
        this.userList.splice(index, 1);
      },
      //保存人员
      btnSave() {
        this.$emit('getUserList', this.userList)
        this.userList = [];
        this.visible=false;
      },
      btnSearch() {
        this.getPageUsers();
      },
      //取得分页搜索条件
      getSearchParames(){
        let lObject = {};

        if(this.qjDeptId !== ""){
          lObject["deptId"] = this.qjDeptId;
        }else {
          lObject["deptId"] = 0;
        }

        if(this.roleCode !== ""){
          lObject["roleCode"] = this.roleCode;
        }

        if (this.listQuery.name.trim() !== '') {
          lObject['username'] = this.listQuery.name.trim();
          lObject['ryName'] = this.listQuery.name.trim();
        }

        return lObject;
      },
      // 分页
      // 每页数
      sizeChangeHandle(val) {
        this.page.pageSize = val
        this.page.currentPage = 1
        this.getPageUsers()
      },
      // 当前页
      currentChangeHandle(val) {
        this.page.currentPage = val
        this.getPageUsers()
      },
      //分页刷新
      getPageUsers() {
        const lParams = this.getSearchParames();
        this.getPersons(this.page,lParams);

      },
      //取消按钮
      btnCancel() {
        this.userList = [];
        this.tableDataDept = [];
        this.listQuery.name = '';
        this.page.total  = 0;
        this.page.currentPage = 1;
        this.page.pageSize = 20;
        this.page.isAsc = false;
        this.qjDeptId = '';

        this.visible = false;
      },
    }
  }

</script>

<style scoped>
</style>
